<html>
  <head>
    <title>API</title>
  </head>
  <body>
    <script>
         /*
            一、全局配置

                          Vue全局配置API                               描述                      H5         App端            小程序      说明

                          1、 Vue.config.silent                       取消 Vue 所有的日志与警告     1          1                 1

                          2、Vue.config.optionMergeStrategies         自定义合并策略的选项          1          1                 1

                          3、Vue.config.devtools              配置是否允许 vue-devtools 检查代码    1          1                 0      只在Web环境下支持

                          4、Vue.config.errorHandler                  指定组件的渲染和观察期间      1           1                 1
                                                                      未捕获错误的处理函数      
                                                                      
                          5、Vue.config.warnHandler                   为 Vue 的运行时警告赋予一个   1           1                 1
                                                                      自定义处理函数

                          6、Vue.config.ignoredElements        须使 Vue 忽略在 Vue 之外的自定义元素  1           1                1       强烈不推荐，会覆盖uni-app框架配置的内置组件

                          7、Vue.config.keyCodes                    给 v-on 自定义键位别名          1           0                0

                          8、Vue.config.performance            设置为 true 以在浏览器开发工具的      1           0                0        只在Web环境下支持
                                                              性能/时间线面板中启用对组件初始化、
                                                              编译、渲染和打补丁的性能追踪

                          9、Vue.config.productionTip          设置为 false 以阻止 vue 在启动时生成生产提示
         */


         /*
              二、全局API

                          Vue全局API            描述                              H5        App端         小程序       说明

                          1、Vue.extend       使用基础 Vue 构造器，创建一个“子类”      1           1             0          不可作为组件使用

                          2、Vue.nextTick     在下次 DOM 更新循环结束之后执行延迟回调   1          0              0

                          3、Vue.set          向响应式对象中添加一个 property，并确保   1          1              1
                                              这个新property同样是响应式的，且触发视图
                                              更新

                          4、Vue.delete       删除对象的 property。如果对象是响应式的，  1           1            1
                                              确保删除能触发更新视图

                          5、Vue.directive    注册或获取全局指令                        1           1             0

                          6、Vue.filter       注册或获取全局过滤器                      1           1             0

                          7、Vue.component    注册或获取全局组件。
                                              注册还会自动使用给定的 id 设置组件的名称   1            1            1

                          8、Vue.use          安装 Vue.js 插件                         1            1            1

                          9、Vue.mixin        全局注册一个混入，
                                              影响注册之后所有创建的每个 Vue 实例        1            1             1       nvue 页面暂不支持

                          10、Vue.version     提供字符串形式的 Vue 安装版本号            1             1            1

                          11、Vue.compile     将一个模板字符串编译成 render 函数。
                                              只在完整版时可用                          1             0             0
         */

         /*
              三、数据选项

                          Vue选项            描述                    H5     App端      小程序    说明

                          1、data            Vue 实例的数据对象        1        1         1

                          2、props           props 可以是数组或对象，   1       1          1
                                            用于接收来自父组件的数据

                          3、propsData       创建实例时传递 props。     1        1          1
                                            主要作用是方便测试 

                          4、computed     计算属性将被混入到 Vue 实例中  1          1         1

                          5、methods      methods 将被混入到 Vue 实例中  1        1          1

                          6、watch        一个对象，键是需要观察的表达式， 1        1          1
                                          值是对应回调函数  


               四、 DOM选项

                          7、el           提供一个在页面上已存在的DOM     1         0         0
                                          元素作为 Vue 实例的挂载目标  

                          8、template     一个字符串模板作为 
                                          Vue 实例的标识使用            1          0          0         uni-app使用的vue是只包含运行时的版本

                          9、render       字符串模板的代替方案，         1          0          0
                                          该渲染函数接收一个
                                          createElement 方法
                                          作为第一个参数用来创建VNode

                          10、renderError 当render函数遭遇错误时，       1          0          0
                                          提供另外一种渲染输出，
                                          只在开发者环境下工作

                         
                          14、parent      指定已创建的示例的父实例，                                 
                                          在两者之间建立父子关系          1          1           1            不推荐，最好不用

                          15、mixins      选项接收一个混入对象的数组       1          1           1

                          16、extends     允许声明扩展另一个组件           1          1           1

                      17、provide/inject  允许一个祖先组件向其所有         1          1           1
                                          子孙后代注入一个依赖，
                                          不论组件层次有多深，并在
                                          其上下游关系成立的时间里始终生效

                          18、name        允许组件模板递归地调用自身        1           1           1

                          19、delimiters  改变纯文本插入分隔符              1           0           0

                          20、functional  使组件无状态 (没有 data)          1           0           0
                                          和无实例 (没有 this 上下文) 

                          21、model       允许一个自定义组件在使用
                                          v-model 时定制 prop 和 event     1           1           0

                          22、inheritAttrs  inheritAttrs属性默认值为true，     1           1           0
                                            表示允许组件的根节点继承
                                            $attrs包含的属性
                                  
                          23、comments      当设为 true 时，                   1           0           0
                                        将会保留且渲染模板中的 HTML 注释

          */

          /*
                  五、资源选项

                          11、directives  包含 Vue 实例可用指令的哈希表   1          1          0

                          12、filters     包含 Vue 实例可用过滤器的哈希表 1          1           1

                          13、components  包含 Vue 实例可用组件的哈希表   1          1           1

         */

         /*
             六、生命周期

                          生命周期钩子        描述                             H5     App端         小程序

                        1、beforeCreate     在实例初始化之后被调用              1        1            1

                        2、created          在实例创建完成后被立即调用          1         1            1

                        3、beforeMount      在挂载开始之前被调用                1         1            1

                        4、mounted          挂载到实例上去之后调用              1          1           1
                                            注意：  此处不能确定子组件被全部
                                            挂载，如果要子组件完全挂载之后再
                                            执行操作可以使用 $nextTick

                        5、beforeUpdate     数据更新时调用，                   1           1           1
                                            发生在虚拟 DOM 打补丁之前 

                        6、updated          由于数据更改导致的虚拟DOM           1           1         1 
                                            重新渲染和打补丁，
                                            在这之后会调用该钩子

                        7、activated        被 keep-alive 缓存的组件激活时调用  1           1           0

                        8、deactivated     被 keep-alive 缓存的组件停用时调用   1           1            0

                        9、beforeDestroy     实例销毁之前调用。
                                            在这一步，实例仍然完全可用           1           1           1
                                            
                        10、destroyed       Vue 实例销毁后调用。                1            1           1
                                            调用后，Vue 实例指示的所有东西
                                            都会解绑定，所有的事件监听器会被移除
                                            所有的子实例也会被销毁
                                            
                        11、errorCaptured   当捕获一个来自子孙组件的错误时被调用  1            1            1
         */


         /*
              七、实例属性

                        Vue实例属性                描述                       H5             App端       小程序

                      1、vm.$data           Vue 实例观察的数据对象             1              1           1

                      2、vm.$props          当前组件接收到的 props 对象        1              1           1

                      3、vm.$el             Vue 实例使用的根 DOM 元素          1              0           0

                      4、vm.$options        用于当前 Vue 实例的初始化选项       1              1           1

                      5、vm.$parent         父实例，如果当前实例有的话          1              1           1                  H5端 view、text 等内置标签是以 Vue 组件方式实现，$parent 会获取这些到内置组件，导致的问题是 this.$parent 与其他平台不一致，解决方式是使用 this.$parent.$parent 获取或自定义组件根节点由 view 改为 div

                      6、vm.$root           当前组件树的根 Vue 实例            1              1           1

                      7、vm.$children       当前实例的直接子组件                1              1           1                 H5端 view、text 等内置标签是以 Vue 组件方式实现，$children 会获取到这些内置组件，导致的问题是 this.$children 与其他平台不一致，解决方式是使用 this.$children.$children 获取或自定义组件根节点由 view 改为 div

                      8、vm.$slots          用来访问被插槽分发的内容            1              1           1

                      9、vm.$scopedSlots    用来访问作用域插槽                 1               1           1
                      
                      10、vm.$refs          一个对象，持有注册过ref属性的
                                            所有DOM元素和组件实例               1             1            0

                      11、vm.$isServer      当前 Vue 实例是否运行于服务器       1              1           0                 App端总是返回false

                      12、vm.$attrs         包含了作用域中不作为prop被识别      1              1           0
                                            (且获取)的 attribute绑定

                      13、vm.$listeners     包含了父作用域中的
                                           (不含.native 修饰符的)v-on 
                                           事件监听器                         1               1          0

         */



         /*
              八、实例方法

                        Vue实例方法              描述                                     H5           App端           小程序

                      1、vm.$watch()       观察Vue实例上的一个表达式或者一个函数             1             1               1
                                           的计算结果的变化

                      2、vm.$set()         这是全局Vue.Set的别名                           1             1               1

                      3、vm.$delete()      这是全局Vue.delete的别名                        1             1               1

                      4、vm.$on()          监听当前实例上的自定义事件                       1             1               1

                      5、vm.$once()        监听一个自定义事件，但是只触发一次                1             1               1

                      6、vm.$off()         移除自定义事件监听器                             1             1               1

                      7、vm.$emit()        触发当前实例上的事件                             1             1               1

                      8、vm.$mount()       手动地挂载一个未挂载的实例                        1            0                0

                      9、vm.$forceUpdate() 迫使Vue实例重新渲染                              1             1               1

                      10、vm.$nextTick()   将回调延迟到下次DOM更新循环之后执行                1            1                1

                      11、vm.$destory()    完全销毁一个实例                                  1            1               1
         */



         /*
              九、模板指令

                      Vue指令            描述                                      H5            App端            小程序

                    1、v-text          更新元素的 textContent                      1               1                  1

                    2、v-html          更新元素的 innerHTML                        1               1                  0           微信小程序会被转成 rich-text

                    3、v-show          根据表达式的真假值，切换元素的display CSs属性 1                1                 1

                    4、v-if            根据表达式的真假值来有条件的渲染元素          1               1                   1

                    5、v-else          为v-if 或者 v-else-if 添加 "else 块"        1               1                  1

                    6、v-else-if       表示 v-if 的“else if 块”。可以链式调用       1               1                  1

                    7、v-for           基于源数据多次渲染元素或模板块                1               1                  1

                    8、v-on            绑定事件监听器                              1                1                  1

                    9、v-bind         动态地绑定一个或多个 attribute,
                                      或者一个组件 prop 到表达式                    1               1                  1
                                      
                    10、v-model       在表单控件或者组件上床阿金双向绑定              1               1                  1

                    11、v-pre         跳过这个元素和它的子元素的编译过程             1                1                  0

                    12、v-cloak       这个指令保持菜元素上知道关联实例结束编译        1                0                 0

                    13、v-once        值渲染元素和组件一次                          1                 1                0
         */


         /*
              十、特殊属性

                    特殊属性           描述                                      H5            App端            小程序

                  1、key          主要用在Vue的虚拟DOM算法，在新旧节点对比时
                                  辨别VNodes                                     1              1                1

                  2、ref         ref被用来给元素或子组件注册应用信息                1              1                1        非 H5 平台只能获取 vue 组件实例不能获取到内置组件实例

                  3、is          用于动态组件且基于DOM内模板的限制来工作            1            1 (需传入Sting类型)  0
         */


         /*
             十一、内置组件

                    内置组件          描述                                      H5            App端            小程序

                  1、component    渲染一个“元组件”为动态组件。                     1             1                 0
                                 依 is 的值，来决定哪个组件被渲染 
                              
                  2、transition  作为单个元素/组件的过渡效果                       1             0                 0

              3、transition-group 作为多个元素/组件的过渡效果                      1             0                 0

                  4、keep-alive   包裹动态组件时，会缓存不活动的组件实例，
                                  而不是销毁它们                                 1              0                 0

                  5、slot         作为组件模板之中的内容分发插槽                   1              1                1

                  6、template     并不是一个组件，它仅仅是一个包装元素
                                  不会在页面做任何渲染，值接受控制属性             1              1                 1
         */

         /*
              十二、全局变量

                      实现全局变量的方式需要遵循Vue单文件模式的开发规范。

                      详细参考： uni-app全局变量的几种实现方式    https://ask.dcloud.net.cn/article/35021       
         */

         /*
              十三、其他配置

                     Vue 组件编译到小程序平台的时候会编译为对应平台的组件，部分小程序平台支持 options 选项（具体选项参考对应小程序平台文档的自定义组件部分），
                     
                     一般情况默认即可，如有特殊需求可在 Vue 组件中增加 options 属性。



                     属性              类型         默认值                       描述

                  1、multipleSlots    Boolean       true              	在组件定义时的选项中启动多slot支持

                  2、styleIsolation   String     apply-shared           组件样式隔离方式，具体配置选项参见：组件样式隔离  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

                  3、addGlobalClass   Boolean       true                这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效

                  4、virtualHost      Boolean       false               将自定义节点设置成虚拟的，更加接近Vue组件的表现。
                                                                        我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，
                                                                        启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性
         */



         /*
              十四、常见问题

                    1、如何获取页面上传递的数据

                            在onLoad方法里得到，onLoad的参数是其他页面打开单管页面所传递的数据。

                    
                    2、如何设置全局数据和全局方法 

                            uni-app 内置了 Vuex , 在 app 里的使用，可参考 hello-uniapp    store/index.js  

                                  // store.js

                                    import Vue from 'vue'
                                    import Vuex from 'vuex'
                                    Vue.use(Vuex);
                                    const store = new Vuex.Store({
                                       state: {...},
                                       mutations: {...},
                                       actions: {...}
                                    })
                                    export default store



                                  // mian.js
                                    import store from './store'
                                    Vue.prototype.$store = store
                                    const app = new Vue({
                                      store,...
                                    })

                                  
                                  //test.vue 使用时：

                                    import {mapState,mapMutations} from 'vuex'


                    3、如何捕获 app 的 onError

                            由于onError 并不是完整意义上的生命周期，所以只提供一个捕获错误的方法，在app的根组件上添加名为onError的回调函数即可。 
                            如下：

                                export default{

                                     // 只有 app 才会有 onLaunch 生命周期
                                     onLaunch(){
                                     
                                     },


                                     // 捕获 app Error
                                     onError(err){
                                        console.log(err)
                                     }
                                }

                    4、组件属性设置不生效解决办法

                          当重复设置某些属性为相同的值时，不会同步到view层。

                          例如：  每次将scroll-view 组件的 scroll-top 属性值设置为0，只有第一次能顺利返回顶部。

                                  这和 props的单向数据流特性有关，组件内部 scroll-top 的实际值改动后，其绑定的属性并不会一同变化。

                          解决办法有两种 以scroll-view组件为例）：

                                <1>、监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值

                                      <scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

                                      export default {
                                          data() {
                                              return {
                                                  scrollTop: 0,
                                                  old: {
                                                      scrollTop: 0
                                                  }
                                              }
                                          },
                                          methods: {
                                              scroll: function(e) {
                                                  this.old.scrollTop = e.detail.scrollTop
                                              },
                                              goTop: function(e) {
                                                  this.scrollTop = this.old.scrollTop
                                                  this.$nextTick(function() {
                                                      this.scrollTop = 0
                                                  });
                                              }
                                          }
                                      }


                                <2>、监听scroll事件，获取组件内部变化的值，实时更新其绑定值

                                      <scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

                                      	export default {
                                            data() {
                                              return {
                                                scrollTop: 0,
                                              }
                                            },
                                            methods: {
                                              scroll: function(e) {
                                                // 如果使用此方法，请自行增加防抖处理
                                                this.scrollTop = e.detail.scrollTop
                                              },
                                              goTop: function(e) {
                                                this.scrollTop = 0
                                              }
                                            }
                                        }

         */

    </script>
  </body>
</html>